<template>
  <div class="lLimit">
    <div class="label">{{props.label}}</div>
    <div class="options">
      <div class="item" :class="{active: props.modelValue[props.keyType]==item.value}" @click="changeType(item)" v-for="item in props.options">{{item.label}}</div>
    </div>
  </div>
  <div class="limit" v-if="props.showNum==props.modelValue[props.keyType]">
    <div class="block"></div>
    <u-input class="input" :customStyle="style"></u-input> ~
    <u-input class="input" :customStyle="style"></u-input> <span class="unit" v-if="props.unit">{{props.unit}}</span>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: '',
  label: '',
  keyType: '',
  keyStart: '',
  keyEnd: '',
  showNum: undefined,
  itemWidth: {
    type: Number,
    default: 120
  },
  options: {
    type: Array,
    default: () => [{ label: '有限制', value: 1 }, { label: '无限制', value: 2 }]
  },
  unit: {
    type: String,
    default: '岁'
  }
})
const style = { width: props.itemWidth + 'rpx !important', height: '60rpx', borderRadius: '12rpx', }
const emits = defineEmits(['update:modelValue'])

function changeType(item) {
  const _data = JSON.parse(JSON.stringify(props.modelValue))
  _data[props.keyType] = item.value
  emits('update:modelValue', _data)
}





</script>

<style lang="scss" scoped>
.lLimit {
  padding: 10rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .label {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
  }
  .options {
    display: flex;
    gap: 20rpx;
    .item {
      width: 160rpx;
      height: 60rpx;
      background: #f3f3f3;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #666666;
    }
    .active {
      color: #468eff;
      background: #ecf3ff;
    }
  }
}
.limit {
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5rpx;
  .block {
    flex: 0 0 auto;
  }
  .input {
    flex: 0 0 auto;
  }
}
.unit {
  padding-left: 10rpx;
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
}
</style>